<template>
	<el-dialog
		title="修改货物信息"
		v-model="dialogVisible"
		:destroy-on-close="true"
		width="900px"
		class="modify-goods-dialog"
	>
		<div class="modify-form">
			<el-form
				ref="formRef"
				:model="formData"
				:rules="rules"
				label-width="100px"
			>
				<!-- 费用信息 -->
				<div class="cost-info mb-4">
					<div class="section-title mb-2">费用信息</div>
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="费用合计" prop="totalCost">
								<el-input-number
									v-model="formData.totalCost"
									:min="0"
									:precision="2"
									class="!w-full"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="基础费用" prop="baseCost">
								<el-input-number
									v-model="formData.baseCost"
									:min="0"
									:precision="2"
									class="!w-full"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="附加费用" prop="additionalCost">
								<el-input-number
									v-model="formData.additionalCost"
									:min="0"
									:precision="2"
									class="!w-full"
								/>
							</el-form-item>
						</el-col>
					</el-row>
				</div>

				<!-- 货物信息 -->
				<div class="goods-info">
					<div class="section-title mb-2">货物信息</div>
					<GoodsInfoForm
						v-model="formData.goodsList"
						@change="handleGoodsChange"
					/>
				</div>
			</el-form>

			<!-- 提示信息 -->
			<div class="tip-info mt-4">
				<p class="text-yellow-500">
					注：修改货物信息后，系统将重新计算相关费用和更新联运单信息。
				</p>
			</div>
		</div>

		<template #footer>
			<el-button @click="handleCancel">取消</el-button>
			<el-button type="primary" @click="handleConfirm" :loading="submitting">
				确定
			</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import GoodsInfoForm from './GoodsInfoForm.vue';

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	orderData: {
		type: Object,
		default: () => ({}),
	},
});

const emit = defineEmits(['update:modelValue', 'success']);

const dialogVisible = ref(false);
const submitting = ref(false);
const formRef = ref(null);

// 表单数据
const formData = reactive({
	totalCost: 0,
	baseCost: 0,
	additionalCost: 0,
	goodsList: [],
});

// 表单校验规则
const rules = {
	totalCost: [{ required: true, message: '请输入费用合计', trigger: 'blur' }],
	baseCost: [{ required: true, message: '请输入基础费用', trigger: 'blur' }],
	goodsList: [{ required: true, message: '请添加货物信息', trigger: 'change' }],
};

// 监听弹窗显示状态
watch(
	() => props.modelValue,
	(val) => {
		dialogVisible.value = val;
		if (val && props.orderData) {
			// 初始化表单数据
			Object.assign(formData, {
				totalCost: props.orderData.totalCost || 0,
				baseCost: props.orderData.baseCost || 0,
				additionalCost: props.orderData.additionalCost || 0,
				goodsList: props.orderData.goodsList || [],
			});
		}
	},
);

// 监听弹窗关闭
watch(dialogVisible, (val) => {
	emit('update:modelValue', val);
});

// 货物信息变化
const handleGoodsChange = (goodsList) => {
	// TODO: 根据货物信息重新计算费用
	console.log('货物信息变化：', goodsList);
};

// 取消
const handleCancel = () => {
	dialogVisible.value = false;
};

// 确认修改
const handleConfirm = async () => {
	if (!formRef.value) return;

	await formRef.value.validate(async (valid, fields) => {
		if (valid) {
			submitting.value = true;
			try {
				// TODO: 调用修改货物信息接口
				console.log('修改货物信息：', {
					orderNo: props.orderData.orderNo,
					...formData,
				});
				ElMessage.success('货物信息修改成功');
				dialogVisible.value = false;
				emit('success');
			} finally {
				submitting.value = false;
			}
		} else {
			console.log('校验失败', fields);
		}
	});
};
</script>

<style lang="scss" scoped>
.modify-goods-dialog {
	:deep(.el-dialog__body) {
		padding: 20px 24px;
	}

	.section-title {
		font-size: 16px;
		font-weight: 500;
		color: var(--el-text-color-primary);
	}

	.tip-info {
		font-size: 14px;
	}
}
</style>
